<template>
	<div class="sealTable">
		<div class="lz-card" v-for="(item,index) in sealData" :key="index" :class="computedSuccess(item.commands)?'lz-card-success':'lz-card-warning'">
			<div class="card-title">{{item.name}}</div>
			<i class="card-icon " :class="computedSuccess(item.commands)?'el-icon-success':'el-icon-error'"></i>
		</div>
	</div>
</template>

<script>
	let that
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import bus from "/static/js/bus.js"
	export default {
		props: {
			sealData: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		name: 'sealData',
		components: {},
		computed: {
			...mapGetters(['size']),
			computedSuccess(){//检测当前项是否全部合格
				return (data)=>{
					let arr=data.filter((item)=>{
						return item.isSuccess==-1||item.isSuccess==1
					})
					if(arr.length>0){
						return false
					}else{
						return true
					}
				}
			}
		},
		data() {
			return {
				effect: 'dark'
			}
		},
		watch: {},
		mounted() {
			that = this
			setTimeout(()=>{
				console.log(that.sealData);
			},1000)
		},
		methods: {}
	}
</script>

<style scoped="scoped" lang="scss">
	.sealTable{
		display: flex;overflow: auto;padding: 10px;
	}
	.lz-card{
		width: 110px;height: 110px;border-radius: 10px;margin-right: 10px;box-shadow: 1px 1px 2px 2px #f0f0f0;flex-shrink: 0;
		display: flex;flex-direction: column;align-items: center;justify-content: space-around; padding: 10px;box-sizing: border-box;
		.card-title{
			font-size: 11px;font-weight: bold;
		}
		.card-icon{
			font-size: 40px;
		}
	}
	.lz-card-success{
		color: #67C23A;
	}
	.lz-card-warning{
		color: #E6A23C;
	}
</style>
